<template>
  <div class="complaint-list">
    <div class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>违规投诉</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button type="primary" @click="showDialog" style="background-color: #20b2aa;">去投诉</el-button>
    </div>

    <el-table :data="complaintList" style="width: 100%;">
      <el-table-column prop="id" label="序号" width="80"></el-table-column>
      <el-table-column label="动态标题">
        <template #default="{row}">
          <i class="el-icon-document"></i>
          {{ row.title }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="发布时间" width="180" sortable></el-table-column>
      <el-table-column prop="status" label="处理状态" width="120">
        <template #default="{row}">
          <el-tag :type="row.status === '处理完成' ? 'success' : 'warning'">
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{row}">
          <el-button type="primary" link @click="viewDetail(row.id)" style="color: #20b2aa;">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 投诉对话框 -->
    <el-dialog title="创建投诉" v-model="dialogVisible" width="50%">
      <el-form 
        :model="complaintForm" 
        :rules="rules" 
        ref="complaintFormRef" 
        label-width="100px"
      >
        <el-form-item label="投诉标题" prop="title">
          <el-input 
            v-model="complaintForm.title" 
            placeholder="请输入投诉标题"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="投诉内容" prop="content">
          <el-input 
            type="textarea" 
            v-model="complaintForm.content" 
            placeholder="请输入投诉内容"
            :rows="4"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input 
            v-model="complaintForm.contact" 
            placeholder="请输入联系人"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input 
            v-model="complaintForm.phone" 
            placeholder="请输入联系电话"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitComplaint" style="background-color: #20b2aa;">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

export default {
  setup() {
    const router = useRouter()
    const dialogVisible = ref(false)
    const complaintFormRef = ref(null)
    
    const complaintForm = reactive({
      title: '',
      content: '',
      contact: '',
      phone: ''
    })
    
    const rules = reactive({
      title: [{ required: true, message: '请输入投诉标题', trigger: 'blur' }],
      content: [{ required: true, message: '请输入投诉内容', trigger: 'blur' }],
      contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
      phone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
      ]
    })

    // 模拟投诉列表数据
    const complaintList = ref([
      {
        id: '01',
        title: '【麻城市中心】麻城经济开发区谌家园小学建设项目招标预公告',
        createTime: '2022-04-13',
        status: '正在处理中'
      },
      {
  id: '02',
  title: '【麻城市中心】麻城市农村公路管理局招标计划',
  createTime: '2022-04-13',
  status: '正在处理中'
},
{
  id: '03',
  title: '【麻城市中心】麻城经济开发区通泰园小学及附属幼儿园建设项目招标预公告',
  createTime: '2022-04-13',
  status: '正在处理中'
},
{
  id: '04',
  title: '【汉川市中心】汉川电厂四期扩建工程电力和水管网络建设改造设施工程',
  createTime: '2022-04-13',
  status: '正在处理中'
},
{
  id: '05',
  title: '【红安县中心】红安县2023年度小型水库安全监测项目设计采购施工总承包(EPC)',
  createTime: '2022-04-13',
  status: '正在处理中'
},
{
  id: '06',
  title: '海头镇宅基地土地发包项目',
  createTime: '2022-04-13',
  status: '正在处理中'
},
{
  id: '07',
  title: '先锋创业大楼（515-1室）60㎡',
  createTime: '2022-04-13',
  status: '正在处理中'
},
{
  id: '08',
  title: '万达开绿色智能制造产业园项目（二期）比选结果公告',
  createTime: '2022-04-13',
  status: '处理完成'
},
{
  id: '09',
  title: '2023年度工伤基金结算支付智能审核监控项目竞争性磋商公告',
  createTime: '2022-04-13',
  status: '处理完成'
},
{
  id: '10',
  title: '万达开绿色智能制造产业园项目（三期）比选结果公告',
  createTime: '2022-04-13',
  status: '处理完成'
},
{
  id: '11',
  title: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目',
  createTime: '2022-04-13',
  status: '处理完成'
},
{
  id: '12',
  title: '侯马市第二中学校2023年4月至11月政府采购意向-城乡义务教育补助经费中央资金',
  createTime: '2022-04-13',
  status: '处理完成'
},
{
  id: '13',
  title: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目',
  createTime: '2022-04-13',
  status: '处理完成'
},
{
  id: '14',
  title: '侯马市第二中学校2023年4月至8月政府采购意向-城乡义务教育补助经费中央资金',
  createTime: '2022-04-13',
  status: '处理完成'
},
{
  id: '15',
  title: '【次氯酸钠贮存罐修理】采购公告 附件',
  createTime: '2022-04-13',
  status: '处理完成'
}
    ])

    const showDialog = () => {
      // 重置表单
      Object.assign(complaintForm, {
        title: '',
        content: '',
        contact: '',
        phone: ''
      })
      
      // 清除验证状态
      nextTick(() => {
        if (complaintFormRef.value) {
          complaintFormRef.value.clearValidate()
        }
      })
      
      dialogVisible.value = true
    }

    const submitComplaint = async () => {
      try {
        // 验证表单
        await complaintFormRef.value.validate()
        
        // 提交逻辑
        dialogVisible.value = false
        ElMessage.success('投诉提交成功')
        
        // 模拟添加到列表
        complaintList.value.unshift({
          id: (complaintList.value.length + 1).toString().padStart(2, '0'),
          title: complaintForm.title,
          createTime: new Date().toISOString().split('T')[0],
          status: '正在处理中'
        })
      } catch (error) {
        ElMessage.error('请填写完整且正确的信息')
      }
    }

    const viewDetail = (id) => {
      router.push(`/complaint/${id}`)
    }

    return {
      complaintList,
      dialogVisible,
      complaintForm,
      complaintFormRef,
      rules,
      showDialog,
      submitComplaint,
      viewDetail
    }
  }
}
</script>

<style scoped>
.complaint-list {
  padding: 20px;
  background-color: #f5f5f5;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.el-icon-document {
  margin-right: 5px;
  color: #409EFF;
}
</style>